import { Button, Empty, Space, Radio, Checkbox, InputNumber, Table, Card, Statistic } from 'antd';
import { useState, useEffect, useContext } from 'react'
import './index.less'
import { fromCircle } from 'ol/geom/Polygon';
import useMap from '../../hooks/useMap';
import RiskReportContext from '../RiskReportContext';
import { drawCircle, geomToWkt, wktToGeom } from '../../../../../../../utils/helper/mapHelper';
import CztApi from '../../../../../../../utils/apis/CztApi';
import rangeDisplayIcon from '../../../../pages/Jcyj/rangeDisplayIcon';
import LittleTitle from '../../../../../../common/LittleTitle';
import { resourcePath } from '../../../../../../../utils/resource';
import DetailList from '../../common/JudgeAnalysis/DetailList';
import SvgIcon from '../../../../../../common/SvgIcon';

export default function EffectAnalysis(props) {
    const map = useMap();

    const [radius, setRadius] = useState();
    const { zhData } = useContext(RiskReportContext);
    const [loading, setLoading] = useState();

    //console.log('查看props传递的数据',props);
    const [yxList, setYxList] = useState();
    const [onCompleted] = useState(() => {
        return props.onCompleted;
    })
    const [type, setType] = useState('czt')
    const [circle, setCircle] = useState();

    // console.log('yxList', yxList)

    useEffect(() => {
        if (map && radius) {
            const center = wktToGeom(zhData.geom)?.getCoordinates();
            const circle = drawCircle(map, center, radius);
            setLoading(true)
            // const data = yxList ? yxList.map(item => ({name:item?.name})) : [];
            // rangeDisplayIcon(data, circle, map, type)
            CztApi.listByPolygon(fromCircle(circle)).then(resp => {
                setYxList(resp.data);
                onCompleted?.({
                    radius: radius,
                    datas: resp.data
                })
                setCircle(circle)
            }).finally(e => {
                setLoading(false)
            })
            // return ()=>{
            //     const allLayers=map.getLayers().getArray();
            //     [...allLayers].forEach(l=>{
            //         if(l?.get("layerName")=== 'rangeDisplayIcon')
            //         map.removeLayer(l);
            //     })
            // }
        }
    }, [map, radius, zhData, onCompleted, type])

    useEffect(() => {
        if (map && radius) {
            const center = wktToGeom(zhData.geom)?.getCoordinates();
            const circle = drawCircle(map, center, radius);
            const data = yxList ? yxList.map(item => ({ name: item?.name })) : [];
            console.log("@2")
            rangeDisplayIcon(data, circle, map, type, 'nowkt')
            return () => {
                const allLayers = map.getLayers().getArray();
                [...allLayers].forEach(l => {
                    if (l?.get("layerName") === 'rangeDisplayIcon')
                        map.removeLayer(l);
                })
            }
        }

    }, [map, radius, type, yxList, zhData])

    if (!zhData) {
        return <div className='layout-v center'>请先选择灾害数据</div>// <Empty description="请先选择灾害数据" image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
    }

    return <div className='h100' style={{
        overflow: 'auto'
    }}>
        <Space direction='vertical' style={{ width: '100%' }}>
            <Space style={{
                marginTop: 12
            }}>
                <Radio.Group size='small' value={radius} onChange={e => {
                    setRadius(e.target.value);
                }} buttonStyle="solid">
                    <Radio.Button value={5}>5km</Radio.Button>
                    <Radio.Button value={10}>10km</Radio.Button>
                    <Radio.Button value={20}>20km</Radio.Button>
                </Radio.Group>

                <InputNumber size='small' placeholder='其它数值' addonAfter={"km"} style={{
                    width: 120
                }} onChange={value => {
                    setRadius(value);
                }} />
            </Space>

            <LittleTitle fontSize={16} icon={false}>影响类型</LittleTitle>
            <div className='layout-h cards' style={{
                flex: 'flex',
                flexWrap: "wrap",
                paddingTop: 12
            }}>
                <div className='layout-h center stat-card' style={{
                    backgroundImage: `url(${resourcePath.statBg})`,
                    marginRight: 12
                }}>
                    <div>
                        <SvgIcon style={{
                            fontSize: 30
                        }} type="icon-renkoutongji" />
                    </div>
                    <div className='layout-h center fill'>
                        <div className='stat-title'>人口</div>
                        <div className='stat-value'>0</div>
                    </div>
                </div>
                <div className='layout-h center stat-card' style={{
                    backgroundImage: `url(${resourcePath.statBg})`,
                }}>
                    <div>
                        <SvgIcon style={{
                            fontSize: 30
                        }} type="icon-icon153" />
                    </div>
                    <div className='layout-h center fill'>
                        <div className='stat-title'>经济</div>
                        <div className='stat-value'>0</div>
                    </div>
                </div>
                {/* <Card variant="borderless" style={{
                    margin: "0 12px 12px 0"
                }}>
                    <Statistic
                        title="人口"
                        value={0}
                        precision={0}
                        valueStyle={{
                            color: '#fff',
                        }}
                        prefix={<SvgIcon type="icon-renkoutongji" />}
                    />
                </Card>
                <Card variant="borderless" style={{
                    margin: "0 0 12px 0"
                }}>
                    <Statistic
                        title="经济"
                        value={0}
                        precision={0}
                        valueStyle={{
                            color: '#fff',
                        }}
                        prefix={<SvgIcon type="icon-icon153" />}
                    />
                </Card>
                <Card variant="borderless" style={{
                    margin: "0 12px 0 0"
                }}>
                    <Statistic
                        title="房屋"
                        value={0}
                        precision={0}
                        valueStyle={{
                            color: '#fff',
                        }}
                        prefix={<SvgIcon type="icon-fangwutongji" />}
                    />
                </Card>
                <Card variant="borderless">
                    <Statistic
                        title="农田"
                        value={0}
                        precision={0}
                        valueStyle={{
                            color: '#fff',
                        }}
                        prefix={<SvgIcon type="icon-nongtian" />}
                    />
                </Card> */}
            </div>
            <div className='layout-h cards' style={{
                flex: 'flex',
                flexWrap: "wrap",
                paddingTop: 12,
                paddingBottom: 12
            }}>
                <div className='layout-h center stat-card' style={{
                    backgroundImage: `url(${resourcePath.statBg})`,
                    marginRight: 12
                }}>
                    <div>
                        <SvgIcon style={{
                            fontSize: 30
                        }} type="icon-fangwutongji" />
                    </div>
                    <div className='layout-h center fill'>
                        <div className='stat-title'>房屋</div>
                        <div className='stat-value'>0</div>
                    </div>
                </div>
                <div className='layout-h center stat-card' style={{
                    backgroundImage: `url(${resourcePath.statBg})`,
                }}>
                    <div>
                        <SvgIcon style={{
                            fontSize: 30
                        }} type="icon-nongtian" />
                    </div>
                    <div className='layout-h center fill'>
                        <div className='stat-title'>农田</div>
                        <div className='stat-value'>0</div>
                    </div>
                </div>
            </div>
            <LittleTitle fontSize={16} icon={false}>承灾体</LittleTitle>

            <div className='fill' style={{
                paddingTop: 12
            }}>

                <Table loading={loading} size={"small"} bordered columns={[{
                    title: '影响机构',
                    dataIndex: 'name'
                }, {
                    title: '影响数量',
                    dataIndex: 'count',
                    align: "right",
                    render: (text) => {
                        return text + '处'
                    }
                }, {
                    render: (text, record) => {
                        return <Button type="link" size="small" style={{
                            padding: 0
                        }} onClick={() => {
                            map.dispatchEvent({
                                type: "detail.show2",
                                title: record.name,
                                component: <DetailList wkt={geomToWkt(fromCircle(circle))} type={'czt'} cztxl={record.name} />
                            })
                        }}>详情</Button>
                    }
                }]}
                    showHeader={false}
                    dataSource={yxList} />
            </div>


        </Space>

    </div>
}